<%--
  Created by IntelliJ IDEA.
  User: tang
  Date: 2020/4/25
  Time: 15:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="sys" tagdir="/WEB-INF/tags/sys" %>
<!DOCTYPE html>
<html>
<head>
    <title>我的商城 | 内容管理</title>
    <jsp:include page="../includs/header.jsp"></jsp:include>
    <link rel="stylesheet" href="/static/assets/plugins/jquery-ztree/css/zTreeStyle/zTreeStyle.min.css">
    <link rel="stylesheet" href="/static/assets/plugins/dropzone/dropzone.css">
    <link rel="stylesheet" href="/static/assets/plugins/dropzone/min/basic.min.css">
    <link rel="stylesheet" href="/static/assets/plugins/wangEditor/wangEditor.min.css">
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">
    <!-- Navbar -->
    <jsp:include page="../includs/nav.jsp"></jsp:include>
    <!-- Main Sidebar Container -->
    <jsp:include page="../includs/menu.jsp"></jsp:include>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">
                        </h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="/main">主页</a></li>
                            <li class="breadcrumb-item active">${tbContent.id == null ? "新增" : "编辑"}内容</li>
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>

        <!-- Main content -->
        <section class="content">
            <div class="row align-content-center justify-content-center">
                <div class="col-md-7">
                    <c:if test="${baseResult != null}">
                        <div class="alert alert-${baseResult.status == 200 ? "success" : "danger"} alert-dismissible">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                                ${baseResult.message}
                        </div>
                    </c:if>

                    <div class="card card-primary">
                        <div class="card-header">
                            <h3 class="card-title">新增内容</h3>
                        </div>
                        <!-- /.card-header -->
                        <!-- form start -->
                        <form role="form" class="form-horizontal" id="inputForm" action="/content/save" method="post"
                              modelAttribute="tbContent">
                            <input type="hidden" name="id" value="${tbContent.id}">
                            <div class="card-body">
                                <div class="form-group row">
                                    <label for="categoryId" class="col-sm-2 col-form-label">父级类目</label>
                                    <div class="col-sm-10">
                                        <input type="hidden" id="categoryId" name="tbContentCategory.id" value="${tbContent.tbContentCategory.id}">
                                        <input name="categoryName" class="form-control" id="categoryName"
                                               placeholder="请选择" data-toggle="modal" data-target="#modal-default" value="${tbContent.tbContentCategory.name}"
                                               readonly>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="title" class="col-sm-2 col-form-label">标题</label>
                                    <div class="col-sm-10">
                                        <input name="title" class="form-control" id="title" placeholder="标题" value="${tbContent.title}">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="subTitle" class="col-sm-2 col-form-label">子标题</label>
                                    <div class="col-sm-10">
                                        <input name="subTitle" class="form-control" id="subTitle" placeholder="子标题" value="${tbContent.subTitle}">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="titleDesc" class="col-sm-2 col-form-label">标题描述</label>
                                    <div class="col-sm-10">
                                        <input name="titleDesc" class="form-control" id="titleDesc" placeholder="标题描述" value="${tbContent.titleDesc}">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="url" class="col-sm-2 col-form-label">链接</label>
                                    <div class="col-sm-10">
                                        <input name="url" class="form-control" id="url" placeholder="链接" value="${tbContent.url}">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="categoryId" class="col-sm-2 col-form-label">图片1</label>
                                    <div class="col-sm-10">
                                        <input name="pic" class="form-control" id="pic" placeholder="图片1" value="${tbContent.pic}">
                                        <div id="dropz" class="dropzone"></div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="pic2" class="col-sm-2 col-form-label">图片2</label>
                                    <div class="col-sm-10">
                                        <input name="pic2" class="form-control" id="pic2" placeholder="图片2" value="${tbContent.pic2}">
                                        <div id="dropz2" class="dropzone"></div>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-sm-2 col-form-label">详情</label>
                                    <div class="col-sm-10">
                                        <input type="hidden" name="content" id="content">
                                        <div id="editor">${tbContent.content}</div>
                                    </div>
                                </div>
                            </div>
                            <!-- /.card-body -->
                            <div class="card-footer">
                                <button type="button" class="btn btn-default" onclick="history.go(-1)">返回</button>
                                <button id="btnSubmit" type="submit" class="btn btn-primary float-right">提交</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </div>


    <!-- /.content-wrapper -->
    <jsp:include page="../includs/copyright.jsp"></jsp:include>
</div>
<jsp:include page="../includs/footer.jsp"></jsp:include>
<script src="/static/assets/plugins/jquery-ztree/js/jquery.ztree.core-3.5.min.js"></script>
<script src="/static/assets/plugins/dropzone/min/dropzone.min.js"></script>
<script src="/static/assets/plugins/wangEditor/wangEditor.min.js"></script>


<!--自定义模态框-->
<sys:modal title="请选择" message="<ul id='myTree' class='ztree'></ul>"/>
<script>
    $(function () {
        App.initZTree("/content/category/tree/data", ["id"], function (nodes) {
            var node = nodes[0];
            $("#categoryId").val(node.id);
            $("#categoryName").val(node.name)
            $("#modal-default").modal("hide");
        });

        initWangEditor();


    });

    /**
     * 初始化富文本编辑器
     */
    function initWangEditor() {
        var E = window.wangEditor;
        var editor = new E('#editor');
        // 配置服务器端地址
        editor.customConfig.uploadImgServer = '/upload';
        editor.customConfig.uploadFileName = 'editorFiles';
        editor.create();

        $("#btnSubmit").bind("click",function () {
            var contentHtml = editor.txt.html();
            $("#content").val(contentHtml);
        });
    }

    App.initDropzone({
        id: "#dropz",
        url: "/upload",
        init: function () {
            this.on("success", function (file, data) {
                $("#pic").val(data.fileName)
            });
        }
    });

    App.initDropzone({
        id: "#dropz2",
        url: "/upload",
        init: function () {
            this.on("success", function (file, data) {
                $("#pic2").val(data.fileName)
            });
        }
    });

</script>
</body>

</html>
